<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      const key = 'theme-mode'
      function setThemeMode() {
        const theme = localStorage.getItem(key) || 'dark'
        document.documentElement.setAttribute('data-' + key, theme)
      }
      window.addEventListener('storage', setThemeMode)
      setThemeMode()
    </script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000b11" />
    <meta
      name="description"
      content="One-click deploy for any application"
    />
    <link rel="icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <!-- Added by plural team -->
    <link rel='stylesheet' href='https://necolas.github.io/normalize.css/latest/normalize.css' />
    <link rel="stylesheet" href="/page-load-spinner/page-load-spinner.css" />
    <link rel="preload" href="https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-256/16.png" as="image" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json" />
    <!-- Load 'Inter' Google font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
      @font-face {
        font-family: 'Monument';
        src: url("/monument-regular.otf") format("opentype");
        font-weight: 400;
      }

      @font-face {
        font-family: 'Monument';
        src: url("/monument-medium.woff") format("woff");
        font-weight: 450;
      }

      @font-face {
        font-family: 'Monument';
        src: url("/monument-medium.woff") format("woff");
        font-weight: 500;
      }

      @font-face {
        font-family: 'Monument';
        src: url("/monument-bold.woff") format("woff");
        font-weight: 500;
      }

      @font-face {
        font-family: 'Monument';
        src: url("/monument-regular-italic.woff") format("woff");
        font-weight: 400;
        font-style: italic;
      }

      @font-face {
        font-family: 'Monument';
        src: url("/monument-medium-italic.woff") format("woff");
        font-weight: 500;
        font-style: italic;
      }

      @font-face {
        font-family: 'Monument';
        src: url("/monument-bold-italic.woff") format("woff");
        font-weight: 600;
        font-style: italic;
      }

      @font-face {
        font-family: 'Monument Semi-Mono';
        src: url("/ABCMonumentGroteskSemi-Mono-Regular.woff") format("woff");
        font-weight: 400;
      }

      @font-face {
        font-family: 'Monument Semi-Mono';
        src: url("/ABCMonumentGroteskSemi-Mono-Medium.woff") format("woff");
        font-weight: 500;
      }

      @font-face {
        font-family: 'Monument Semi-Mono';
        src: url("/ABCMonumentGroteskSemi-Mono-Heavy.woff") format("woff");
        font-weight: 600;
      }

      @font-face {
        font-family: 'Monument Mono';
        src: url("/ABCMonumentGroteskMono-Regular.woff") format("woff");
        font-weight: 400;
      }

      @font-face {
        font-family: 'Monument Mono';
        src: url("/ABCMonumentGroteskMono-Medium.woff") format("woff");
        font-weight: 500;
      }

      @font-face {
        font-family: 'Monument Mono';
        src: url("/ABCMonumentGroteskMono-Heavy.woff") format("woff");
        font-weight: 600;
      }
    </style>
    <!-- Fix Hljs background color so it can be overridden -->
    <style>
      .hljs {
        background: unset;
      }
    </style>
    <style>
      html,
      body {
        background-color: #171a21;
        overflow: auto hidden;
      }
      html[data-theme-mode='light'],
      html[data-theme-mode='light'] body {
        background-color: #f3f5f7;
      }
    </style>
    <!-- Cookiebot MUST BE FIRST script -->
    <script
      id="Cookiebot"
      src="https://consent.cookiebot.com/uc.js"
      data-cbid="c6718f17-016b-4d02-9bc2-9f1467f610fb"
      data-blockingmode="none"
      type="text/javascript"
      data-widget-position="bottom-left"
    ></script>
    <!-- END Cookiebot -->
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      type="text/plain"
      data-cookieconsent="statistics"
      async 
      src="https://www.googletagmanager.com/gtag/js?id=G-GP9XH1EENY"></script>
    <script type="text/plain" data-cookieconsent="statistics">
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-GP9XH1EENY');
    </script>
    <title>App | Plural</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="loading-placeholder">
      <div class="spinner">
        <div class="spinner-graphic">
          <div class="bg">
            <div class="bg-image"></div>
            <div class="bg-image"></div>
            <div class="bg-image"></div>
          </div>
        </div>
        <h1>
          Loading Plural<span data-dot-num="1" class="dot">.</span><span data-dot-num="2" class="dot">.</span><span data-dot-num="3" class="dot">.</span>
        </h1>
      </div>
      <script src="/page-load-spinner/page-load-spinner.js"></script>
    </div>
    <script type="module" src="/src/main.tsx"></script>
    <script src="https://js.stripe.com/v3/" />
    <script>
      // Intercom widget
      (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/p127zb9y';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
    </script>
  </body>
</html>
